<template>
  <div class="card-header-button-group">
    <y-button-group>
      <y-button
        v-for="(item, index) in btnsComputed"
        :key="index"
        class="card-header-button-group-item"
        v-bind="item"
        @click.native="_click(item)"
        tips
      />
      <el-dropdown v-if="more">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-arrow-down el-icon--right"
        ></el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, index) in moreComputed"
            :key="index"
            @click.native="$emit(item.trigger, item)"
            >{{ item.label }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </y-button-group>
  </div>
</template>

<script>
export default {
  name: "card-header-button-group",
  props: {
    btns: Array,
    more: Array,
  },
  data() {
    return {
      defBtns: {
        add: { label: "新增", icon: "add", trigger: "add" },
        edit: { label: "编辑", icon: "edit", trigger: "edit", type: "warning" },
        delete: {
          label: "删除",
          icon: "delete",
          trigger: "delete",
          type: "danger",
        },
        audit: { label: "审核", icon: "audit", trigger: "audit" },
        print: { label: "打印", icon: "print", trigger: "print" },
        save: { label: "保存", trigger: "save" },
        back: { label: "返回", trigger: "back" },
      },
    };
  },
  computed: {
    btnsComputed() {
      if (!this.btns) return [];
      var btns = [];
      var _this = this;
      _this.btns.forEach((btn) => {
        if (typeof btn == "string") {
          btn = _this.defBtns[btn];
          if (btn.trigger == "back") btn.before = this.backHandler;
        }
        if (typeof btn == "object") {
          btns.push(btn);
        }
      });
      return btns;
    },
    moreComputed(){
        if (!this.more) return [];
      var more = [];
      var _this = this;
      _this.more.forEach((btn) => {
        if (typeof btn == "string") {
          btn = _this.defBtns[btn];
          if (btn.trigger == "back") btn.before = this.backHandler;
        }
        if (typeof btn == "object") {
          more.push(btn);
        }
      });
      return more;
    }
  },
  created() {},
  methods: {
    _click(item) {
      var that = this;
      item.before && item.before();
      if (["add", "edit"].includes(item.trigger)) {
        that.$emit("card-header-button-group-event", item, (res) => {
          that.$router.push(
            that.$router.currentRoute.path + "/form?" + $y.toQueryParams(res)
          );
          item.after && item.after();
        });
      } else {
        this.$emit("card-header-button-group-event", item);
        item.after && item.after();
      }
    },
    backHandler() {
      this.$store.dispatch("tabs/close", this.$store.state.tabs.currTabs);
      this.$router.go(-1);
    },
  },
};
</script>


<style lang="scss" scoped>
.card-header-button-group {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}
</style>